import Scrollbars from "react-custom-scrollbars-4";
import { websiteStore } from "../store/index.js";
import clsx from "clsx";
import { Dropdown } from "antd";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export default function Side() {
  const { ref, website, activeKey, setActiveKey, removeWebsite } =
    websiteStore.useContainer();

  return (
    <div className="flex h-full flex-col gap-3">
      <div className="flex-1 overflow-hidden">
        <Scrollbars autoHide>
          <div ref={ref}>
            {website.map((item) => (
              <Dropdown
                trigger={["contextMenu"]}
                menu={{
                  items: [
                    { key: "1", label: "删除" },
                    { key: "2", label: "复制链接" },
                  ],
                  onClick: ({ key }) => {
                    if (key == "2") {
                      window.utools.copyText(item.url);
                      return;
                    }

                    removeWebsite(item);
                  },
                }}
              >
                <div
                  key={item.id}
                  className={clsx(
                    "flex items-center mb-4 justify-center cursor-pointer relative hover:opacity-100",
                    activeKey === item.id ? "" : "opacity-90"
                  )}
                  onClick={() => {
                    setActiveKey(item.id);
                  }}
                >
                  <img src={item.logo} className="size-9 rounded-lg" />
                  {activeKey === item.id && (
                    <div
                      className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-5"
                      style={{ backgroundColor: "#36c" }}
                    />
                  )}
                </div>
              </Dropdown>
            ))}
          </div>
        </Scrollbars>
      </div>
      <Setting />
    </div>
  );
}

const Setting = () => {
  const { setActiveKey } = websiteStore.useContainer();
  return (
    <div
      className="size-16 flex items-center justify-center cursor-pointer text-[#666] hover:text-[#222]"
      onClick={() => setActiveKey("setting")}
    >
      <svg viewBox="0 0 1024 1024" width="30" height="30" fill="currentColor">
        <path
          d="M387.264 479.68l-192 0c-52.928 0-96-43.072-96-96l0-192c0-52.928 43.072-96 96-96l192 0c52.928 0 96 43.072 96 96l0 192C483.264 436.64 440.192 479.68 387.264 479.68zM195.264 159.68c-17.632 0-32 14.368-32 32l0 192c0 17.632 14.368 32 32 32l192 0c17.632 0 32-14.368 32-32l0-192c0-17.632-14.368-32-32-32L195.264 159.68z"
          p-id="14784"
        ></path>
        <path
          d="M387.264 927.68l-192 0c-52.928 0-96-43.072-96-96l0-192c0-52.928 43.072-96 96-96l192 0c52.928 0 96 43.072 96 96l0 192C483.264 884.64 440.192 927.68 387.264 927.68zM195.264 607.68c-17.632 0-32 14.336-32 32l0 192c0 17.664 14.368 32 32 32l192 0c17.632 0 32-14.336 32-32l0-192c0-17.664-14.368-32-32-32L195.264 607.68z"
          p-id="14785"
        ></path>
        <path
          d="M832.128 479.68l-192 0c-52.928 0-96-43.072-96-96l0-192c0-52.928 43.072-96 96-96l192 0c52.928 0 96 43.072 96 96l0 192C928.128 436.64 885.056 479.68 832.128 479.68zM640.128 159.68c-17.664 0-32 14.368-32 32l0 192c0 17.632 14.336 32 32 32l192 0c17.664 0 32-14.368 32-32l0-192c0-17.632-14.336-32-32-32L640.128 159.68z"
          p-id="14786"
        ></path>
        <path
          d="M832.128 927.68l-192 0c-52.928 0-96-43.072-96-96l0-192c0-52.928 43.072-96 96-96l192 0c52.928 0 96 43.072 96 96l0 192C928.128 884.64 885.056 927.68 832.128 927.68zM640.128 607.68c-17.664 0-32 14.336-32 32l0 192c0 17.664 14.336 32 32 32l192 0c17.664 0 32-14.336 32-32l0-192c0-17.664-14.336-32-32-32L640.128 607.68z"
          p-id="14787"
        ></path>
      </svg>
    </div>
  );
};
